.tab-area {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 60px;
  background: linear-gradient(264.37deg, #9bd587 6.63%, #64a96c 91.03%);
  margin: 160px auto;
  display: flex;
  border-radius: 8px 8px 0 0;
}
.tab-area .tab-left,.tab-area .tab-right{
  position: relative;
  flex: 1;
  cursor: pointer;
}

.tab-area .tab-left .tab-left-text,.tab-area .tab-right .tab-right-text{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  cursor: pointer;
}
.tab-area .tab-left .selected,.tab-area .tab-right .selected {
 font-weight: 700;
}

.tab-area .tab-left-image,.tab-area .tab-right-image {
  position: absolute;
  z-index: 1;
  top: 0px;
  width: 56%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}

.tab-area .tab-left-image {
  left: 0px;
}

.tab-area .tab-right-image {
  right: 0px;
  display: none;
}


/* 左边的选中隐藏 */
.gradient-transe-left-hide {
  display: none;
}

/* 右边的选中动画显示 */
.tab-area .gradient-transe-right-show {
  display: block; 
  animation: animations-for-right-show 0.3s linear forwards;
}
@-webkit-keyframes animations-for-right-show {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}


/* 右边的选中隐藏 */
.gradient-transe-left-hide {
  display: none;
}

/* 左边的选中动画显示 */
.gradient-transe-left-show {
  display: block;
  animation: animations-for-left-show 0.3s linear forwards;
}
@-webkit-keyframes animations-for-left-show {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0rpx);
  }
}